<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

		<title>Element Delegation Tests</title>

		<script src="../../../Source/Core/Core.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Array.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Function.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Number.js" type="text/javascript"></script>
		<script src="../../../Source/Types/String.js" type="text/javascript"></script>
		<script src="../../../Source/Types/Object.js" type="text/javascript"></script>
		<script src="../../../Source/Types/DOMEvent.js" type="text/javascript"></script>
		<script src="../../../Source/Browser/Browser.js" type="text/javascript"></script>
		<script src="../../../Source/Slick/Slick.Parser.js" type="text/javascript"></script>
		<script src="../../../Source/Slick/Slick.Finder.js" type="text/javascript"></script>
		<script src="../../../Source/Element/Element.js" type="text/javascript"></script>
		<script src="../../../Source/Element/Element.Event.js" type="text/javascript"></script>
		<script src="../../../Source/Element/Element.Delegation.js" type="text/javascript"></script>

		<style>

			body {
				font: 13px sans-serif;
			}

			h1 {
				border-top: 1px dashed #AAA;
				font: normal 22px sans-serif;
				margin: 5px 0;
				padding-top: 10px;
			}

			#content {
				top: 0;
				bottom: 0;
				left: 370px;
				position: absolute;
				overflow: auto;
				padding-bottom: 150px;
				right: 0;
			}

			#aside {
				background: #F5F5F5;
				border-right: 1px dashed #AAA;
				bottom: 0;
				font-family: monospace;
				left: 0;
				margin-right: 10px;
				overflow: auto;
				padding: 10px;
				position: absolute;
				top: 0;
				width: 340px;
			}

			.success {
				background: greenyellow;
			}

			.fail {
				background: orangered;
			}

			.box {
				background: greenyellow;
				border: 1px solid black;
				padding: 10px;
				width: 300px;
			}

		</style>

	</head>
	<body>

		<div id="aside">
			<h2>Log</h2>
			<div id="log"></div>
		</div>

		<script>

			var logger = $('log');
			var log = function(msg, success){
				new Element('div', {
					'class': success == true ? 'success' : (success == false ? 'fail' : ''),
					text: msg
				}).inject(logger, 'top');
			};

		</script>

		<div id="content">

			<h1>Change</h1>

			<p>
				It should fire events in a consistent way
			</p>

			<div id="change">
				<input type="text" value="some text" class="someClass" /><br />
				<select name="yo">
					<option>First</option>
					<option>Second</option>
					<option>Third</option>
				</select><br />
				<input type="checkbox" value="1" /><br />
				<input type="radio" name="rad[]" value="1" /><input type="radio" name="rad[]" value="2" />
			</div>

			<script>
				$$('input.someClass,select,input[type="checkbox"],input[type="radio"]').addEvent('change', function(){
					log('native change', true);
				});
				$('change').addEvent('change:relay(input.someClass,select,input[type="checkbox"],input[type="radio"])', function(){
					log('change delegation', true);
				});
				$(document.body).addEvent('change:relay(#change)', function(){
					log('change bubbles', true);
				});
			</script>

		</div>

	</body>
</html>

